<template>
   <div>
    <el-form :model="menuObj" :rules="ruleList" ref="menuForm" label-width="140px" class="demo-menuObj">
        <el-form-item label="菜单名称" prop="title">
            <el-input v-model="menuObj.title"></el-input>
        </el-form-item>
        <el-form-item label="菜单name" prop="name">
            <el-input v-model="menuObj.name"></el-input>
        </el-form-item>
        <el-form-item label="路由" prop="path">
            <el-input v-model="menuObj.path"></el-input>
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
            <el-input v-model="menuObj.component"></el-input>
        </el-form-item>
        <el-form-item label="是否在菜单中显示"  prop="show">
         
            <el-radio-group v-model="menuObj.show">
                <el-radio :label="1">显示</el-radio>
                <el-radio :label="0">不显示</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('menuForm')">确认</el-button>
            <el-button @click="resetForm('menuForm')">重置</el-button>
        </el-form-item>
        </el-form>
   </div>
</template>

<script>
import axiosEl from '@/utils/axios';
export default {
    props:{
        action:Object,
        currentData:Object
    },
    data(){
        return {
            menuObj:{
                show:1
            },
            ruleList:{
                title: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入菜单name', trigger: 'blur' },        
                ],
                path: [
                    { required: true, message: '请输入路径', trigger: 'blur' }, 
                ],
                component: [
                    { required: true, message: '请输入组件', trigger: 'blur' },
                ],
                show: [
                    { required: true, message: '请选择是否需要再菜单中显示', trigger: 'blur' },
                ],
                
            }
        }
    },
    watch:{
        currentData:{
            immediate:true,  // 立即监听
            handler(newObj){
                
                
                this.menuObj  = newObj;
                
                this.$nextTick(()=>{
                    this.$refs.menuForm.clearValidate()
                })
              
            }
        }
    },
    methods:{
        submitForm(form){
            this.$refs[form].validate(async (valid)=>{
                if(!valid) return;

                // 验证成功后 调接口
                const {method,url,kind} =   this.action;      
              let resData = await  axiosEl({
                    method:method,
                    url:url,
                    data:this.menuObj
                })
                if(resData.code==1) {
                    this.$message({
                        type:'success',
                        message:resData.msg
                    })
                    this.$emit('result',true)
                }
            })
        },
        resetForm(form){
            // 表单重置
            this.$refs[form].resetFields();
        }
    }
  
}
</script>

<style>

</style>